<template>
    <div class="white-box">
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">订单编号：</span>
                <el-input placeholder="输入订单编号" v-model.trim="order_sn" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">商品名称：</span>
                <el-input placeholder="输入商品名称" v-model.trim="good_name" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">供应商ID：</span>
                <el-input placeholder="输入供应商ID" v-model.trim="supplier_id" clearable></el-input>
            </div>
            <div class="task-one__btn">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="order_sn" label="订单编号" width="130" fixed="left"></el-table-column>
            <el-table-column label="商品名称" width="240" fixed="left">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img" loading="lazy" :src="proxy.imgUrl + row.product_img + '!img_400'" fit="cover" v-if="row.product_img" />
                        <div class="table-lr__right">
                            <p class="line-two lr-title">{{ row.product_name }}</p>
                            <p class="lr-text">规格：{{ row.norm }}/{{ row.unit }}</p>
                            <p class="lr-text">等级：{{ row.level }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="product_number" label="用户下单数" min-width="100"></el-table-column>
            <el-table-column prop="demotion_num" label="降级数量" min-width="90"></el-table-column>
            <el-table-column prop="cancel_num" label="取消数量" min-width="90"></el-table-column>
            <el-table-column prop="no_sku" label="退货数量" min-width="90"></el-table-column>
            <el-table-column prop="user_num" label="可取消数" min-width="90"></el-table-column>
            <el-table-column label="供应商信息" min-width="160">
                <template #default="{ row }">
                    <p>{{ row.supplier_name }}[ID:{{ row.supplier_id }}]</p>
                </template>
            </el-table-column>
            <el-table-column label="买家" min-width="170">
                <template #default="{ row }">
                    <p>
                        <span v-if="row.user_name">{{ row.user_name }}，</span>UID: {{ row.uid }}
                    </p>
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="创建时间" width="160"></el-table-column>
            <el-table-column label="操作" width="180" class-name="operation-nav" fixed="right">
                <template #default="score">
                    <el-button link type="primary" class="theme-btn" @click="clickMark(score.row)">缺货补货</el-button>
                    <el-button link type="primary" class="theme-btn" @click="clickCancel(score.row)">退款退货</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 退款退货 -->
        <el-dialog v-model="dialogCancel" title="退款退货" width="640px" :append-to-body="true" :destroy-on-close="true" @close="closeCancel">
            <div class="tag-item">
                <div class="tag-item__label">订单商品ID</div>
                <div class="tag-item__right">{{ itemObj.order_product_id }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">剩余可退款/货数</div>
                <div class="tag-item__right">{{ itemObj.user_num }}</div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">退款/货数量</div>
                <div class="tag-item__right">
                    <el-input-number v-model="cancel_nums" :min="1" :max="itemObj.user_num" />
                </div>
            </div>
            <div class="tag-item">
                <div class="tag-item__label">退款/货原因</div>
                <div class="tag-item__right">
                    <el-input v-model.trim="reason" type="textarea" clearable :rows="4" placeholder="请输入退款/货原因" />
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmCancel">确认</el-button>
                    <el-button @click="closeCancel">取消</el-button>
                </span>
            </template>
        </el-dialog>

        <go-back />
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { Search } from "@element-plus/icons-vue"
import OneLoad from "@mixins/one-load"
import GoBack from "@components/GoBack.vue"

const { proxy } = getCurrentInstance()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        so: good_name.value,
        order_sn: order_sn.value,
        supplier_id: supplier_id.value,
    }
    getdata("order/noSku", params)
}

// 搜索
const order_sn = ref("")
const good_name = ref("")
const supplier_id = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

// 退货标记
const clickMark = (row) => {
    proxy.$axios
        .post("order/product/doNoSku", {
            pid: row.order_product_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "退货标记成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 退款/货
const reason = ref("")
const cancel_nums = ref(1)
const itemObj = ref({})
const form_loading = ref(false)
const dialogCancel = ref(false)
const clickCancel = (row) => {
    itemObj.value = row
    dialogCancel.value = true
}
// 确认取消
const confirmCancel = () => {
    if (reason.value == "") {
        proxy.$message({ message: "请填写退款/货原因", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("order/product/cancel", {
            pid: itemObj.value.order_product_id,
            cancel_num: cancel_nums.value,
            reason: reason.value,
        })
        .then((res) => {
            dialogCancel.value = false
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "操作成功！", type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {
            dialogCancel.value = false
            form_loading.value = false
        })
}
const closeCancel = () => {
    dialogCancel.value = false
    form_loading.value = false
    itemObj.value = {}
    cancel_nums.value = 1
    reason.value = ""
}
</script>
<script>
export default {
    name: "OrderRefund",
}
</script>

<style lang="less" scoped>
.tag-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: @margin-md;
    .tag-item__label {
        flex: none;
        text-align: right;
        width: 140px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
    }

    .tag-item__right {
        flex: none;
        width: 500px;
    }
}
</style>
